<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    div, span {
      width: 140px;
      height: 140px;
      margin: 20px;
      background: #9999CC;
      border: #000 1px solid;
      float: left;
      font-size: 17px;
      font-family: Roman;
    }

    div.mini {
      width: 30px;
      height: 30px;
      background: #CC66FF;
      border: #000 1px solid;
      font-size: 12px;
      font-family: Roman;
    }


    div.visible {
      display: none;
    }
  </style>
  <script type="text/javascript" src="../script/jquery-3.6.0.min.js" charset="UTF-8"></script>
  <script type="text/javascript">
    $(function (){
      $("#b1").click(function () {
        $("div[title]").css("background", "green");
      })

      $("#b2").click(function (){
        $("div[title='test']").css("background", "green")
      })

      $("#b3").click(function (){
        $("div[title != 'test']").css("background", "green")
      })

      $("#b4").click(function () {
        $("div[title^='te']").css("background", "green");
      })
      $("#b5").click(function () {
        $("div[title$='est']").css("background", "green")
      })
      $("#b6").click(function () {
        $("div[title*='es']").css("background", "green");
      })
      $("#b7").click(function () {
        $("div[id][title *='es']").css("background", "green")
      })
    })
  </script>
</head>
<body>
<input type="button" value="含有属性title 的div元素." id="b1"/><br/><br/>
<input type="button" value="属性title值等于test的div元素" id="b2"/><br/><br/>
<input type="button" value="属性title值不等于test的div元素(没有属性title的也将被选中)" id="b3"/><br/><br/>
<input type="button" value="属性title值 以te开始 的div元素" id="b4"/><br/><br/>
<input type="button" value="属性title值 以est结束 的div元素" id="b5"/><br/><br/>
<input type="button" value="属性title值 含有es的div元素" id="b6"/><br/><br/>
<input type="button" value="选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素" id="b7"/><br/><br/>

<div id="one" title="test">
  div id为one test
</div>

<div id="one-1" title="texxx">
  div id为one-1 texxx
</div>

<div id="one-2" title="xxxest">
  div id为one-2 xxxest
</div>

<div id="one-3" title="xxxesxxxxxt">
  div id为one-3 xxxesxxxxxt
</div>

<div id="two" title="ate">
  div id为two
</div>

<div id="three" class="one">
  div id为three
</div>
</body>
</html>
